<template>
  <div class="diet-customize-page">
    <!-- 头部：返回按钮 + 页面标题 -->
    <div class="header">
      <button class="back-btn" @click="$router.back()">&lt;</button>
      <h1 class="page-title">减脂餐单</h1>
    </div>

    <!-- 主标题 -->
    <h2 class="section-main-title">定制你的减脂饮食餐单</h2>

    <!-- 问题1：定制哪几餐 -->
    <section class="question-group">
      <div class="question-header">
        <span class="check-icon">✓</span>
        <h3 class="question-title">你希望定制每天的哪几餐？</h3>
      </div>
      <div class="options-group">
        <button 
          class="option-btn" 
          :class="{ active: mealsSelected.includes('breakfast') }"
          @click="toggleMeal('breakfast')"
        >
          早餐
        </button>
        <button 
          class="option-btn" 
          :class="{ active: mealsSelected.includes('lunch') }"
          @click="toggleMeal('lunch')"
        >
          午餐
        </button>
        <button 
          class="option-btn" 
          :class="{ active: mealsSelected.includes('dinner') }"
          @click="toggleMeal('dinner')"
        >
          晚餐
        </button>
      </div>
    </section>

    <!-- 问题2：是否吃辣 -->
    <section class="question-group">
      <div class="question-header">
        <span class="check-icon">✓</span>
        <h3 class="question-title">是否吃辣？</h3>
      </div>
      <div class="options-group">
        <button 
          class="option-btn" 
          :class="{ active: isSpicy === 'yes' }"
          @click="isSpicy = 'yes'"
        >
          是
        </button>
        <button 
          class="option-btn" 
          :class="{ active: isSpicy === 'no' }"
          @click="isSpicy = 'no'"
        >
          否
        </button>
      </div>
    </section>

    <!-- 问题3：其他特殊要求 -->
    <section class="question-group">
      <div class="question-header">
        <span class="check-icon">✓</span>
        <h3 class="question-title">其他特殊要求</h3>
      </div>
      <div class="options-group">
        <button 
          class="option-btn" 
          :class="{ active: specialReq === 'none' }"
          @click="specialReq = 'none'"
        >
          无特殊
        </button>
        <button 
          class="option-btn" 
          :class="{ active: specialReq === 'noPork' }"
          @click="specialReq = 'noPork'"
        >
          不吃猪肉
        </button>
        <button 
          class="option-btn" 
          :class="{ active: specialReq === 'vegan' }"
          @click="specialReq = 'vegan'"
        >
          纯素食
        </button>
        <button 
          class="option-btn" 
          :class="{ active: specialReq === 'lactoOvo' }"
          @click="specialReq = 'lactoOvo'"
        >
          蛋奶素食
        </button>
      </div>
    </section>

    <!-- 问题4：食物过敏 -->
    <section class="question-group">
      <div class="question-header">
        <span class="check-icon">✓</span>
        <h3 class="question-title">是否有以下食物过敏？</h3>
      </div>
      <div class="options-group">
        <button 
          class="option-btn" 
          :class="{ active: allergy === 'none' }"
          @click="allergy = 'none'"
        >
          无过敏
        </button>
        <button 
          class="option-btn" 
          :class="{ active: allergy === 'seafood' }"
          @click="allergy = 'seafood'"
        >
          海鲜
        </button>
        <button 
          class="option-btn" 
          :class="{ active: allergy === 'nuts' }"
          @click="allergy = 'nuts'"
        >
          坚果
        </button>
        <button 
          class="option-btn" 
          :class="{ active: allergy === 'peanut' }"
          @click="allergy = 'peanut'"
        >
          花生
        </button>
        <button 
          class="option-btn" 
          :class="{ active: allergy === 'dairy' }"
          @click="allergy = 'dairy'"
        >
          乳制品
        </button>
      </div>
    </section>

    <!-- 问题5：不建议多吃的菜品 -->
    <section class="question-group">
      <h3 class="question-title">这些菜不建议多吃，是否仍在餐单中推荐给你呢？</h3>

      <!-- 子问题：油脂较高 -->
      <div class="sub-question">
        <div class="sub-question-header">
          <span class="check-icon">✓</span>
          <span class="sub-question-title">油脂较高的</span>
          <p class="example-text">例如：方便面、五花肉、奶油等</p>
        </div>
        <div class="options-group">
          <button 
            class="option-btn" 
            :class="{ active: highFat === 'recommend' }"
            @click="highFat = 'recommend'"
          >
            可以推荐
          </button>
          <button 
            class="option-btn" 
            :class="{ active: highFat === 'notRecommend' }"
            @click="highFat = 'notRecommend'"
          >
            不用推荐
          </button>
        </div>
      </div>

      <!-- 子问题：含盐量较高 -->
      <div class="sub-question">
        <div class="sub-question-header">
          <span class="check-icon">✓</span>
          <span class="sub-question-title">含盐量较高的</span>
          <p class="example-text">例如：腊肠、咸鱼、辣白菜等</p>
        </div>
        <div class="options-group">
          <button 
            class="option-btn" 
            :class="{ active: highSalt === 'recommend' }"
            @click="highSalt = 'recommend'"
          >
            可以推荐
          </button>
          <button 
            class="option-btn" 
            :class="{ active: highSalt === 'notRecommend' }"
            @click="highSalt = 'notRecommend'"
          >
            不用推荐
          </button>
        </div>
      </div>

      <!-- 子问题：含糖量较高 -->
      <div class="sub-question">
        <div class="sub-question-header">
          <span class="check-icon">✓</span>
          <span class="sub-question-title">含糖量较高的</span>
          <p class="example-text">例如：蜜汁叉烧、可乐鸡翅、糖醋藕片等</p>
        </div>
        <div class="options-group">
          <button 
            class="option-btn" 
            :class="{ active: highSugar === 'recommend' }"
            @click="highSugar = 'recommend'"
          >
            可以推荐
          </button>
          <button 
            class="option-btn" 
            :class="{ active: highSugar === 'notRecommend' }"
            @click="highSugar = 'notRecommend'"
          >
            不用推荐
          </button>
        </div>
      </div>
    </section>

    <!-- 生成餐单按钮 -->
    <button class="generate-btn" @click="generateDietPlan">生成专属减脂餐单</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 问题1：定制的餐次（数组存储选中项）
const mealsSelected = ref(['breakfast']); // 初始默认选中“早餐”
const toggleMeal = (meal) => {
  const index = mealsSelected.value.indexOf(meal);
  if (index > -1) {
    mealsSelected.value.splice(index, 1); // 取消选中
  } else {
    mealsSelected.value.push(meal); // 选中
  }
};

// 问题2：是否吃辣
const isSpicy = ref('no'); // 初始默认“否”

// 问题3：特殊要求
const specialReq = ref('none'); // 初始默认“无特殊”

// 问题4：食物过敏
const allergy = ref('none'); // 初始默认“无过敏”

// 问题5：不建议多吃的菜品
const highFat = ref('notRecommend'); // 油脂较高：初始“不用推荐”
const highSalt = ref('notRecommend'); // 含盐量较高：初始“不用推荐”
const highSugar = ref('recommend'); // 含糖量较高：初始“可以推荐”

// 生成餐单逻辑（可根据需求对接后端）
const generateDietPlan = () => {
  // 收集所有选中的选项（示例：打印到控制台）
  console.log('定制参数：', {
    meals: mealsSelected.value,
    isSpicy: isSpicy.value,
    specialReq: specialReq.value,
    allergy: allergy.value,
    highFat: highFat.value,
    highSalt: highSalt.value,
    highSugar: highSugar.value,
  });

  // 跳转到餐单结果页（示例：路由跳转）
  router.push('/diet-result');
};
</script>

<style scoped>
.diet-customize-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 头部 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.back-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 16px;
  color: #333;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* 主标题 */
.section-main-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #333;
}

/* 问题组通用样式 */
.question-group {
  margin-bottom: 32px;
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* 带对勾的圆形图标 */
.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 50%;
  font-size: 14px;
  margin-right: 8px;
}

.question-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* 选项组通用样式 */
.options-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.option-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

/* 选项激活态 */
.option-btn.active {
  background-color: #ff6b6b;
  color: white;
}

/* 子问题样式 */
.sub-question {
  margin-bottom: 24px;
}

.sub-question-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.sub-question-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.example-text {
  font-size: 14px;
  color: #999;
}

/* 生成按钮 */
.generate-btn {
  width: 100%;
  padding: 16px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.generate-btn:hover {
  background-color: #ff4d4f;
}
</style>